<template>
  <view class="wrap">
    <u-top-tips ref="uTips"></u-top-tips>
    <u-form :model="formData">
      <u-form-item label="房屋选择" prop="house_layout" label-width="120">
        <view class="u-flex u-col-center u-row-between re">
          <picker mode="selector" class="picker" range-key="house_sn" :range="houseList" :value="formData.resources_sn" @change="bindDateChange($event, 'resources_sn')">
            <view class="picker-text" style="justify-content: space-between;">
              <text>{{resources_sn}}</text>
              <u-icon name="arrow-right" color="#999" size="28"></u-icon>
            </view>
          </picker>
          
        </view>
      </u-form-item>
      <u-form-item label="维修类型" prop="repair_type re" label-width="120">
        <view class="u-flex u-col-center u-row-between">
          <picker mode="selector" class="picker" range-key="name" :range="typeList" :value="formData.repair_type" @change="bindDateChange($event, 'repair_type')">
            <view class="picker-text" style="justify-content: space-between;">
            <text>{{repair_type}}</text>
              <u-icon name="arrow-right" color="#999" size="28"></u-icon>
            </view>
          </picker>
          
        </view>
      </u-form-item>
      <u-form-item label="维修时间" prop="house_floor_type re" label-width="120">
        <view class="u-flex u-col-center u-row-between">
          <picker mode="date" class="picker picker-div" :value="formData.start_time" :start="startDate" :end="endDate" @change="bindDateChange($event, 'start_time')">
            <view class="picker-text">{{formData.start_time}}</view>
          </picker>
          <view>-</view>
          <picker mode="date" class="picker picker-div" :value="formData.end_time" :start="startDate" :end="endDate" @change="bindDateChange($event, 'end_time')">
            <view class="picker-text">{{formData.end_time}}</view>
          </picker>
        </view>
      </u-form-item>
      <u-form-item label="维修描述" prop="content" label-width="120" class="abc">
        <textarea cols="30" rows="6" v-model="formData.content" class="textarea" placeholder="维修描述"></textarea>
      </u-form-item>
      <u-form-item label="图集" prop="house_img_list" label-width="120">
        <u-upload width="150" height="150" ref="uUpload" :fileList="images" @on-uploaded="onUploaded"
          @on-remove="onRemove" :action="uploadurl" :header="header" :form-data="formdata"></u-upload>
      </u-form-item>
      <u-button type="primary" hover-class="none" shape="circle" @click="submit">确认提交</u-button>
    </u-form>
  </view>
</template>
<style lang="scss" scoped>
  .picker{
    width: 100%; height: 90rpx;position: relative;
    &.picker-div{width: 40%; border-radius: 8rpx; border: 1px solid #ededed;}
    .picker-text{position: absolute; width: 100%; height: 100%; left: 0;top: 0; display: flex; align-items: center; justify-content: center;}
  }
  /deep/.abc .u-form-item__body{align-items: self-start !important;}
  .wrap {
    background-color: #fff !important;
    padding: 0 30rpx 80rpx;
  }

  .textarea {
    border: 1px solid #ededed;
    padding: 20rpx;
    box-sizing: border-box;
    display: block;
    width: 100%;
  }

  .re {
    position: relative;
  }

  .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 9999;
    left: 0;
    top: 0;
  }

  .pup {
    background-color: #fff;
    padding: 30rpx;
    padding-bottom: 80rpx;

    .title {
      padding-bottom: 20rpx;
      border-bottom: 1px solid #ccc;
      margin-bottom: 30rpx;
      font-weight: bold;
    }

    .list {
      display: flex;
      flex-wrap: wrap;

      .item {
        border-radius: 4px;
        border: 1px solid #ededed;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 80rpx;
        margin: 0 2% 16rpx 0;
        box-sizing: border-box;

        &.on {
          background-color: #2979ff;
          color: #fff;
          border-color: #2979ff;
        }
      }

      &.list2 {
        .item {
          width: 49%;

          &:nth-child(2n+2) {
            margin-right: 0 !important;
          }
        }
      }

      &.list3 {
        .item {
          width: 32%;

          &:nth-child(3n+3) {
            margin-right: 0 !important;
          }
        }
      }
    }
  }
</style>
<script>
  export default {
    data() {
      const currentDate = this.getDate({
        format: true
      })
      return {
        errMsg:'',
        show: false,
        date: '',
        formData:{
          content:'', // 描述
          img:'', // 图片
          resources_sn:'', // 房屋类型
          start_time:'', // 开始时间
          end_time:'', // 结束时间
          repair_type:'', // 维修类型
        },
        repair_type:'',
        resources_sn:'',
        typeList:[],
        houseList:[],
        http:'',
        pickerList:null, // 下拉菜单
      }
    },
    onReady() {

    },
    computed: {
      
      startDate() {
        return this.getDate('start');
      },
      endDate() {
        return this.getDate('end');
      },
      header() {
      	return {
      		token: this.vuex_token || '',
      	};
      },
      formdata() {
      	let multipart = (this.vuex_config.config && this.vuex_config.config.upload.multipart) || '';
      	let isObj = this.$u.test.object(multipart);
      	if (isObj) {
      		return this.vuex_config.config.upload.multipart;
      	}
      	return {};
      },
      uploadurl() {
      	if (!this.vuex_config.upload) {
      		return '';
      	}
      	return this.vuex_config.upload.uploadurl;
      }
    },
    onLoad(e) {
      this.http = this.$api.httpUrlApi();
      this.$api.repairReportConfigApi({}).then(res=>{
        if(res.code === 1){
          this.pickerList = res.data
          this.typeList = res.data.repair_type;
          this.houseList = res.data.resources_sn;
        }
      })
    },
    methods: {
      tips(msg){
          this.$refs.uTips.show({
            title: msg,
            type: 'error',
            duration: '2300'
          })
      },
      submit(){
        console.log('提交------', this.formData)
        // content:'', // 描述
        // img:'', // 图片
        // resources_sn:'', // 房屋类型
        // start_time:'', // 开始时间
        // end_time:'', // 结束时间
        // repair_type:'', // 维修类型
        if(this.formData.resources_sn === '') return this.tips('请选择房屋类型')
        if(this.formData.start_time === '') return this.tips('请选择维修时间')
        if(this.formData.end_time === '') return this.tips('请选择维修时间')
        if(this.formData.repair_type === '') return this.tips('请选择维修类型')
        if(this.formData.img === '') return this.tips('请上传图片')
        if(this.formData.content === '') return this.tips('请填写描述')
        this.$api.addRepairReportApi(this.formData).then(res=>{
          console.log('res.code', res)
          uni.showToast({
            title:'报修信息提交成功',
            icon:'none'
          })
          setTimeout(()=>{
            uni.redirectTo({
              url:'/pages/my/my'
            })
          },800)
        })
      },
      onUploaded(e, name) {
      	console.log(e, name);
      	// this.images = e
      	// 	.map(item => {
      	// 		return item.response ? item.response.data.url : item.url.replace(this.http,'');
      	// 	})
      		// .join(',');
          console.log('images--->',this.images)
          this.formData.img = e.map(item => {
            return item.response && item.response.code === 1 && item.response.data.url ? item.response.data.url : item.url.replace(this.http,'');
          })
          console.log('this.formData.img------------>',this.formData.img)
      },
      onRemove(index, lists, name) {
      	this.images = lists
      		.map(item => {
      			return item.response.data.url;
      		})
      		.join(',');
      },
      
      bindDateChange: function(e, name) {
        // this.date = e.detail.value
        console.log('resources_sn', e)
        this.formData[name] = e.detail.value;
        if(name==='resources_sn'){
          this[name] = this.houseList[this.formData[name]].house_sn
        }else if(name==='repair_type'){
          this[name] = this.typeList[this.formData[name]].name
        }
      },
      getDate(type) {
        const date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();

        if (type === 'start') {
          year = year - 60;
        } else if (type === 'end') {
          year = year + 2;
        }
        month = month > 9 ? month : '0' + month;
        day = day > 9 ? day : '0' + day;
        return `${year}-${month}-${day}`;
      },
    }
  }
</script>